<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.teacherName" clearable class="filter-item" style="width: 200px;" placeholder="请输入老师姓名" />
      <el-select v-model="listQuery.storeId" placeholder="请选择门店" class="filter-item" clearable @change="selectStore">
        <el-option v-for="item in storeOptions" :key="item.storeId" :label="item.storeName" :value="item.storeId" />
      </el-select>
      <el-select
        v-model="listQuery.classId"
        :disabled="!listQuery.storeId"
        placeholder="请选择班级"
        class="filter-item"
        clearable>
        <el-option v-for="item in classOptions" :key="item.classId" :label="item.className" :value="item.classId" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleAdd">添加</el-button>
      <el-button :disabled="multipleSelection.length===0" class="filter-item" type="danger" icon="el-icon-delete" @click="handleDeleteAll">批量删除</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column align="center" width="100px" label="ID" prop="teacherId" />
      <el-table-column align="center" label="老师名称" prop="teacherName" />
      <el-table-column align="center" label="手机号码" prop="phone" />
      <el-table-column align="center" label="所属门店" prop="storeName" />
      <el-table-column align="center" label="老师介绍" prop="teacherDesc" />
      <el-table-column align="center" label="创建时间" prop="created" />
      <el-table-column align="center" label="操作" prop="status" width="260">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editTeacher(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteTeacher(scope.row.teacherId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getList" />
  </div>
</template>

<script>
import {
  getClassLsit
} from '@/api/class'
import {
  fetchList,
  deleteTeacher
} from '@/api/teacher'
import {
  getStoreLsit
} from '@/api/store/store'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'User',
  components: {
    Pagination
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        index: 0,
        size: 10,
        teachName: null,
        storeId: null
      },
      storeOptions: [],
      classOptions: [],
      multipleSelection: []
    }
  },
  created() {
    this.getStoreLsit()
    this.getList()
  },
  methods: {
    getStoreLsit() {
      const params = {
        index: 0,
        size: 100,
        storeName: undefined
      }
      getStoreLsit(params).then(res => {
        this.storeOptions = res.data.data.content
      })
    },
    getList(e) {
      if (e && e.page) {
        this.listQuery.index = e.page - 1
      }
      this.listLoading = true
      fetchList(this.listQuery)
        .then(response => {
          this.list = response.data.data.content
          this.total = response.data.data.totalRecords
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.index = 0
      this.listQuery.page = 1
      this.getList()
    },
    editTeacher(row) {
      const {
        teacherId,
        age,
        phone,
        storeIds,
        teacherDesc,
        teacherName
      } = row
      this.$router.push({
        path: '/teacher/editTeacher',
        query: {
          teacherId,
          age,
          phone,
          storeIds: storeIds,
          teacherDesc,
          teacherName
        }
      })
    },
    deleteTeacher(teacherId) {
      this.$confirm('此操作将永久删除该老师, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const params = {
            idList: [teacherId]
          }
          deleteTeacher(params).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleAdd() {
      this.$router.push({
        path: '/teacher/addteacher'
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    handleDeleteAll() {
      const idList = []
      this.multipleSelection.forEach(item => {
        idList.push(item.teacherId)
      })
      deleteTeacher({
        idList
      }).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getList()
      })
    },
    getClassLsit(data) {
      getClassLsit(data).then(response => {
        this.classOptions = response.data.data.content
      })
    },
    selectStore(v) {
      this.classOptions = []
      this.listQuery.classId = ''
      this.getClassLsit({
        storeId: v,
        index: 0,
        size: 100
      })
    }
  }
}
</script>
